<%@ include file="/common/taglibs.jsp"%>

<script type="text/javascript">
	var count = 0;

	function myClickHandler() {
		$("#error_div1").hide();
	}

	function deleteRow(row) {
		if (count <= 0) {
			$("#error_div1").html("No Privilege to Remove");
			$("#error_div1").show();
			return false;
		} else {
			var delRow = row.parentNode.parentNode.parentNode.rowIndex;
			document.getElementById('layoutTable').deleteRow(delRow);
			count--;
		}
	}

	function cloneMappingRow(id) {
		var table = document.getElementById(id);
		if (table) {
			var tbody = table.getElementsByTagName('tbody')[0];
			var numRows = tbody.rows.length;
			var lastRow = tbody.rows[numRows - 1];
			var newRow = lastRow.cloneNode(true);
			newRow.setAttribute('id', 'row' + numRows);
			tbody.appendChild(newRow);
		}
		count++;
	}
</script>


<script>
jQuery(document).ready(function(){
	jQuery("#albumForm").validate();
});
</script>
<div style="padding: 5px;" align="center">
	<!-- <span class="head-dec">Create Album</span> -->
	<br />
	<br />
	<s:hidden id="id" name="album.id"></s:hidden>
	<s:form name="albumForm" id="albumForm"  action="saveOrUpdateAlbum"
		enctype="multipart/form-data" method="post">

		<table border="0" align="center">
			<tr>
				<td class="inputField" nowrap="nowrap">Name</td>
				<td><s:textfield name="album.name"
						cssClass="text large required" required="true"
						style="width:250px;" /></td>
			</tr>
			<tr>
				<td>&nbsp;</td>
			</tr>

			<tr>
				<td class="inputField" nowrap="nowrap">Status</td>
				<td><s:radio name="album.status"  id="saveOrUpdateAlbum_album_status" list="#{'Active':'Active','InActive':'InActive'}" value="%{album.getStatus()}" /></td>
			</tr>

			<tr>
				<td>&nbsp;</td>
			</tr>

			<tr>
				<table id="layoutTable" border="0" cellspacing="0" cellpadding="0"
					width="350px" align="center">
					<thead class="th_content">
						<tr class="gridTable">
							<th width="18px">Upload Picture</th>
						</tr>
					</thead>
					<tbody>
						<s:if test="album.albumPictures.size() > 0">
							<s:iterator value="album.albumPictures" var="queryColumn"
								status="rowstatus">
								<tr id="clonablerow">
									<td><s:file name="files" required="true" value="%{name}" /></td>
									<td width="17px"><p>
											&nbsp;<a href="javascript:;"
												onclick="cloneMappingRow('layoutTable')">Add</a>
										</p></td>
									<td width="17px"><p>
											&nbsp;<a href="javascript:;" onclick="deleteRow(this)">Remove</a>
										</p></td>
								</tr>
							</s:iterator>
						</s:if>
						<s:else>
							<tr id="clonablerow">
								<td><s:file name="files" required="true" /></td>
								<td width="17px"><p>
										&nbsp;<a href="javascript:;"
											onclick="cloneMappingRow('layoutTable')">Add</a>
									</p></td>
								<td width="17px"><p>
										&nbsp;<a href="javascript:;" onclick="deleteRow(this)">Remove</a>
									</p></td>
							</tr>
						</s:else>
					</tbody>
				</table>
			</tr>

			<tr>
				<td>&nbsp;</td>
			</tr>

			<tr>
				<td colspan="2">
				<td colspan="2"><s:reset value="Clear" id="saveOrUpdateAlbum_0"
						cssClass="button-gray" theme="simple" /> <s:if
						test="event.id == ''">
						<s:submit value="Create" id="saveOrUpdateAlbum_0"
							cssClass="button-green" theme="simple" />
					</s:if> <s:else>
						<s:submit value="Update" id="saveOrUpdateAlbum_0"
							cssClass="button-green" theme="simple" />
					</s:else> <input type="button" value="List" id="saveOrUpdateAlbum_0"
					class="button-gray" onclick="javascript:showLists('/albums');" />
				</td>
			</tr>

		</table>
	</s:form>
</div>

